<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-29 10:46:20
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-21 15:12:34
 * @FilePath: /vue3-uniapp/src/pages/tabbar/AreaOrderList/AreaOrderList.vue
-->

<script lang="ts" setup>
import { useAppStore } from '@/store';
import type {
    ViewInstance,
    OnInit,
    OnDown,
    OnUp
} from '@/components/ui/MescrollView/typings';
import type { MyAreaEsListItem } from '@/typings/api/my';
import { useAfterAuth } from '@/service/hook/useAfterAuth';
import { useForkJoin } from '@/service/rxjs/useForkJoin';
import { useAfterAuthAndMescrollInit } from '@/service/hook/useAfterAuthAndMescrollInit';
import { useMescrollHeight } from '@/service/useMescrollHeight';

import FilterView from './components/FilterView/FilterView.vue';
import { useList } from './useList';

const { cssVarObject } = storeToRefs(useAppStore());

const { param, list, listTotal, getList, confirm, reset } = useList();

const { topHeight, bottomHeight, mescrollHeight } = useMescrollHeight();

const { onMescrollInit } = useAfterAuthAndMescrollInit(
    async (query, viewInstance) => {
        try {
            param.value.current = 1;
            const res = await getList();
            if (res === undefined) {
                throw new Error('请求失败，请联系管理员');
            }
            viewInstance.endSuccess(
                param.value.current,
                param.value.size,
                res.data.records.length,
                listTotal.value
            );
        } catch (e) {
            console.log(e);
            viewInstance.endErr();
        }
    }
);

const onDown: OnDown = async (viewInstance) => {
    try {
        param.value.current = 1;
        const res = await getList();
        console.log(`!!!!!!`, res);
        if (res === undefined) {
            throw new Error('请求失败，请联系管理员');
        }
        viewInstance.endSuccess(
            param.value.current,
            param.value.size,
            res.data.records.length,
            listTotal.value
        );
    } catch (e) {
        console.log(e);
        viewInstance.endErr();
    }
};
const onUp: OnUp = async (viewInstance) => {
    try {
        param.value.current += 1;
        const res = await getList();
        if (res === undefined) {
            throw new Error('请求失败，请联系管理员');
        }
        viewInstance.endSuccess(
            param.value.current,
            param.value.size,
            res?.data.records.length,
            listTotal.value
        );
    } catch (e) {
        console.log(e);
        viewInstance.endErr();
    }
};

const goDetail = (item: MyAreaEsListItem) => {
    // 到详情页
    uni.$uv.route({
        url: `/pages/order/DetailView/DetailView?orderId=${item.id}&orderType=${item.orderType}`,
        type: 'navigateTo'
    });
};
</script>

<template>
    <PageContainer>
        <view class="areaorderlist-container">
            <FixedTop v-model:height="topHeight">
                <BaseNavbar :bg-color="cssVarObject['--bg-front']">
                    <template #default>
                        <view class="c-text text-base fw-700">辖区事件</view>
                    </template>
                </BaseNavbar>
                <FilterView v-model="param" @confirm="confirm" @reset="reset" />
            </FixedTop>

            <MescrollView
                @init="onMescrollInit"
                @down="onDown"
                @up="onUp"
                :height="mescrollHeight"
                :canUp="true"
                :canDown="true"
            >
                <view class="main">
                    <view
                        v-if="listTotal !== 0"
                        class="text-xs c-text2 flex flex-row items-center justify-center mb-[10rpx]"
                        >共有{{ listTotal }}件事件</view
                    >
                    <view
                        v-for="(item, index) in list"
                        :key="index"
                        class="mb-[24rpx]"
                        @click="() => goDetail(item)"
                    >
                        <EventCard
                            :typeText="item.typeName"
                            :status="item.status"
                            :isRejected="item.isRejected"
                            :title="item.title || item.description"
                            :source="item.sourceType"
                            :date="item.createTime"
                            :address="item.location"
                            :severity="item.level"
                        />
                    </view>
                </view>
            </MescrollView>

            <FixedBottom v-model:height="bottomHeight">
                <CustomTabbar model-value="辖区" />
            </FixedBottom>
        </view>
    </PageContainer>
</template>

<style lang="scss" scoped>
.areaorderlist-container {
    background: var(--bg-background);
    min-height: 100vh;
    .main {
        padding: 24rpx;
        // padding-bottom: 100rpx;
    }
}
</style>
